<template>
	<app-layout>
		<view class='partner' v-if="pageList[234]">
			<!-- <app-jump-button form :open_type="pageList[234].open_type" :url="pageList[234].url">
				<image :src="pageList[234].icon_url" class="image" />
			</app-jump-button> -->
			<view class="pbutton" @click="toWare(pageList[234].url)">
				<image class="pimg" :src="pageList[234].icon_url" mode="widthFix" />
			</view>
		</view>
		<!-- 店铺列表 -->
		<view class="beloop" :style="{height:beHeight+'rpx'}" v-if="list.length > 0">
			<view class="belooprow" :style="item.style" @click="toBoutique(item.id,item.mch_id)"
				v-for="(item,index) in list" :key="index">
				<view class="image">
					<image class="img" :src="item.cover_url" mode="widthFix"></image>
				</view>
				<view class="title u-line-2">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 尝试 -->
		<!-- <view class="">
			<ware-flow :list="list" @click="toBoutique"></ware-flow>
		</view> -->
		<view class="no-content" v-if="!list || list.length === 0">暂无店铺记录</view>
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="../../static/image/icon/back-top.png"></image>
		</view>
	</app-layout>
</template>
<script>
	import {
		mapState,
	} from "vuex";
	import wareFlow from '../../components/page-component/u-goods-list/wateflow.vue';

	export default {
		name: "list",
		data() {
			return {
				mch_id: 1,
				page: 1,
				page_count: 1,
				list: [],
				keyword: '',
				boxHeight: [],
				beHeight: '',
				pageList: [],
				istore: false,
				mchinfo: '',
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,

				// rend: false
			}
		},
		components: {
			wareFlow
		},
		onLoad: function() {
			this.loadData()
			this.navsReq()
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShow() {
			if (this.$store.state.user.info.vdian_id != null) {
				this.judgeApply(this.$store.state.user.info.vdian_id)
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/store/list',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				query: {

				}
			});
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				userInfo: state => state.user.info,
			}),
		},
		onReachBottom: function() {
			// // console.log(111);
			// // console.log(this.rend);
			// // if (this.rend) {
			// 	this.rend = false
			// 	console.log(111);
			if (this.page < this.page_count) {
				this.page++;
				this.loadData();
			} else {
				// this.page = 1
				let indexloop = this.$storage.getStorageSync('storebouLoop');
				if (indexloop) {
					this.list = this.list.concat(indexloop)
				} else {
					this.page = 1
					this.loadData()
				}
			}
			// }
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
			list: function(newVal, oldVal) {
				// console.log(newVal,666666,oldVal,777777777);
				if (newVal != oldVal) {
					// #ifdef MP-WEIXIN
					// this.newList = this.newList.concat(newVal)
					// console.log(this.newList);
					// #endif
					let mark = oldVal.length;
					let len = this.list.length;
					let style = '';
					this.$nextTick(async function() {
						const query = uni.createSelectorQuery().in(this);
						let dataArray = [];
						await new Promise((resolve, reject) => {
							setTimeout(() => {
								query.selectAll('.beloop .belooprow').fields({
									size: true
								}, data => {
									dataArray = data;
									resolve()
								}).exec();
							}, 300)
						})
						for (let i = mark; i < len; i++) {
							if (i < 2) {
								if (i == 0) {
									style = `top: 0; left: 16rpx;`
								} else {
									style = `top: 0; left: 382rpx;`
								}
								this.boxHeight.push(dataArray[i].height)
								if (this.boxHeight[0] < this.boxHeight[1]) {
									this.beHeight = this.boxHeight[1] * 2
								} else {
									this.beHeight = this.boxHeight[0] * 2
								}
							} else {
								let minHeight = this.boxHeight[0];
								if (minHeight > this.boxHeight[1]) {
									minHeight = this.boxHeight[1];
									this.boxHeight[1] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 382rpx;`
									this.beHeight = this.boxHeight[1] * 2 + 32 * Math.floor(i / 2)
								} else {
									this.boxHeight[0] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 16rpx;`
									this.beHeight = this.boxHeight[0] * 2 + 32 * Math.floor(i / 2)
								}
							}
							this.$set(newVal[i], 'style', style);
							this.$forceUpdate();
						}
					})
				}
			}
		},
		methods: {
			// 失败方法（作废）
			/* render(e) {
				console.log(e);
				if (e) {
					this.rend = true
				} else {
					this.rend = false
				}
			}, */
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			loadData() {
				const self = this;
				self.$showLoading();
				self.$request({
					url: self.$api.apply.list,
					data: {
						mch_id: 1,
						review_status: 1,
						page: self.page,
						limit: 20
					}
				}).then(res => {
					self.$hideLoading();
					if (res.code == 0) {
						let rlist = []
						rlist = res.data.list.filter(item => {
							return item.review_status == 1 && item.is_delete == 0
						})
						self.list = self.list.concat(rlist);
						self.page_count = res.data.pagination.page_count;
						self.$storage.setStorageSync('storebouLoop', self.list)
					}
				}).catch(res => {
					self.$hideLoading();
				})
			},
			navsReq() {
				this.$request({
					url: this.$api.navs.index,
					data: {
						id: 231
					}
				}).then((res) => {
					if (res.code === 0) {
						this.pageList = res.data.list
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {

				})
			},
			toBoutique(id, mch_id) {
				uni.navigateTo({
					url: '/pages/store/boutique/boutique?id=' + id + '&mch_id=' + mch_id
				})
			},
			/* toBoutique(item) {
				uni.navigateTo({
					url: '/pages/store/boutique/boutique?id=' + item.id + '&mch_id=' + item.mch_id
				})
			}, */
			toWare(url) {
				if (this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken ===
					null) {
					this.$store.dispatch('user/accessToken');
					return;
				}
				// console.log(this.$store.state.user.info.vdian_id);
				// if (this.istore) {
				// 	uni.navigateTo({
				// 		url: '/pages/store/boutique/boutique?id=' + this.mchinfo.id + '&mch_id=' + this.mchinfo
				// 			.mch_id
				// 	})
				// } else {
				if (this.mchinfo.review_status == undefined) {
					uni.navigateTo({
						url: url
					})
				} else {
					if (url.indexOf('?') != -1) {
						uni.navigateTo({
							url: url + '&status=' + this.mchinfo.review_status + '&mch_id=' + this.mchinfo.mch_id +
								'&id=' + this.mchinfo.id
						})
					} else {
						uni.navigateTo({
							url: url + '?status=' + this.mchinfo.review_status + '&mch_id=' + this.mchinfo.mch_id +
								'&id=' + this.mchinfo.id
						})
					}
				}
				// }
			},
			judgeApply(vid) {
				if (vid != null) {
					this.$request({
						url: this.$api.apply.store,
						data: {
							id: vid
						},
						method: 'get',
					}).then(res => {
						this.mchinfo = res.data
						if (res.data.is_delete == 0) {
							if (res.data.review_status == 1) {
								this.istore = true
							} else {
								this.istore = false
							}
						}
					}).catch(e => {

					})
				}
			},
			beSearch: function(e) {
				if (this.keyword.length === 0) {
					this.toSearch = !this.toSearch;
					this.getFocus = this.toSearch;
				}
			},
			//搜索
			bindConfirm() {
				[
					this.page,
					this.list
				] = [
					1,
					[]
				]
				this.loadData();
			},

			bindInput: function(e) {
				this.keyword = e.detail.value;
			},

			cancelPrint() {
				this.keyword = '';
				this.toSearch = false;
				this.bindConfirm();
			},
		},
	}
</script>
<style scoped lang="scss">
	.search-content {
		height: #{56rpx};
		border-radius: #{28rpx};
		background: #fff;
		position: relative;
		width: 100%;
		margin-left: #{24rpx};

		.input {
			height: #{56rpx};
			border-radius: #{28rpx};
			color: #353535;
			width: 90%;
			background-color: #ffffff;
		}

		.icon-search {
			background-image: url("../../static/image/icon/icon-search.png");
			height: #{24rpx};
			width: #{24rpx};
			background-size: 100% auto;
			margin-right: #{10rpx};
			background-repeat: no-repeat;
		}
	}

	.search-text {
		color: #b2b2b2;
		font-size: #{24rpx};
		margin: 0 #{5rpx};
	}

	.liststore {

		.liststore-item {
			width: 686rpx;
			height: 441rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 32rpx auto;

			.avatar {
				width: 100%;
				height: 360rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				padding: 0 32rpx;
				line-height: 80rpx;
			}
		}
	}

	.list-head {
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100%;
	}

	.no-content {
		color: #888;
		padding: #{100rpx} 0 0 0;
		text-align: center;
	}

	.beloop {
		// width: 686rpx;
		margin: 48rpx auto 12rpx;
		position: relative;
	}

	.belooprow {
		position: absolute;
		top: 0;
		left: 0;
		margin-bottom: 32rpx;
		width: 350rpx;
		background: #FFFFFF;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.belooprow .image {
		width: 100%;
		// height: 470rpx;
	}

	.belooprow .image .img {
		width: 100%;
		height: 100%;
	}

	.belooprow .title {
		margin: 8rpx 14rpx 24rpx;
		font-size: 12px;
		line-height: 18px;
		color: rgba(0, 0, 0, 0.84);
	}

	.mch-list-input {
		height: #{88rpx};
		padding: 0 #{24rpx};
		background: #EFEFF4;


		.box {
			margin-right: #{24rpx};
			height: #{56rpx};
			border-radius: #{28rpx};
			background: #FFFFFF;

			input {
				border-radius: #{28rpx};
			}
		}

		.icon-cats {
			// background-image: url("./../image/list-cat.png");
			background-repeat: no-repeat;
			background-size: 100% auto;
			height: #{30rpx};
			width: #{38rpx};
		}

		.close-word {
			height: #{56rpx};
			width: #{70rpx};
			position: absolute;
			right: 0;
			top: 0;
			z-index: 20;

			.icon-close {
				background-image: url("../../static/image/icon/icon-close.png");
				background-repeat: no-repeat;
				background-size: 100% auto;
				height: #{25rpx};
				width: #{25rpx};
			}
		}
	}

	.list-cat-model {
		padding-top: #{12rpx};
		padding-bottom: #{12rpx};
		padding-left: #{20rpx};
		background: #f7f7f7;

		.cat-name {
			color: #353535;
			font-size: #{24rpx};
			border: #{1rpx} solid #e7e7e7;
			border-radius: #{28rpx};
			line-height: #{56rpx};
			height: #{56rpx};
			background: #ffffff;
			padding: 0 #{24rpx};
			margin: #{10rpx} #{12rpx} #{10rpx} #{12rpx};
		}
	}

	.gap {
		height: #{88rpx};
	}

	.partner {
		// width: 686rpx;
		// margin: 20rpx auto;
		width: 750rpx;
		// border-radius: 32rpx;
		// background: linear-gradient(180deg, #EDD5D5 0%, #C8C8C8 100%);
		// height: 300rpx;
		overflow: hidden;

		.pbutton {
			width: 100%;
			height: 100%;

			.pimg {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}

	.partner-url {
		width: 100%;
		height: 100%;
	}

	.partner .image {
		width: 100%;
		height: 100%;
	}


	.list-shop {
		margin: #{10rpx} #{20rpx};
		width: #{710rpx};
		background: #fff;
		border-radius: #{16rpx};
	}

	.list-shop .shop-info {
		padding-right: #{24rpx};
	}

	.list-shop .distance {
		align-self: flex-start;
		padding-top: #{36rpx};
		font-size: #{24rpx};
		color: #999999;
		padding-right: #{50rpx};
	}

	.list-shop .list-shop-icon {
		border-radius: #{8rpx};
		height: #{100rpx};
		width: #{100rpx};
		margin: #{24rpx};
	}

	.list-shop .name {
		color: #353535;
		font-size: #{28rpx};
		margin-bottom: #{24rpx};
	}

	.list-shop .shop {
		font-size: #{24rpx};
		color: #999;
	}

	.list-shop .goods-num {
		padding-right: #{32rpx};
	}

	.list-shop .goods {
		padding-bottom: #{24rpx};
		margin: 0 #{16rpx};
	}

	.list-shop .goods-box {
		margin: 0 #{8rpx};
	}

	.list-shop .goods-info {
		position: relative;
		height: #{210rpx};
		width: #{210rpx};
	}

	.list-shop .goods-info view {
		background: #fff;
		font-size: #{28rpx};
		opacity: 0.8;
		width: #{210rpx};
		color: #ff4544;
		height: #{50rpx};
		position: absolute;
		bottom: 0;
	}

	.list-shop .goods-info image {
		height: 100%;
		width: 100%;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
